<template>
    <div class="list-box">
        <h4 class="list-title">
            <i class="el-icon-refresh list-fresh" @click="refresh"></i>
            <span>运单</span>
            <!--<div class="list-text" @click="showDriverListTrue" v-if="showDriverList">显示</div>-->
            <div class="list-text" @click="showOrderList = !showOrderList" v-if="">已选</div>
            <!--<div class="list-text" @click="showOrderListFalse" v-if="!showOrderList">全部</div>-->
        </h4>
        <div class="search-div">
            <el-input placeholder="请输入识别码查找运单" v-model="searchStr" class="input-with-select">
                <i class="el-icon-circle-close-outline"
                   style="font-size: 20px;position:relative;top: 10px;"
                   slot="suffix"
                   @click="clearInput">
                </i>
            </el-input>
        </div>
        <div style="padding-bottom: 10px">
            <div v-for="(item,index) in menu" >
                <div style="float: left;position: relative">
                    <el-radio v-model="wayBillType" :label="item.type" border style="margin:10px 0 0 12px">{{item.name}}</el-radio>
                    <el-badge :value="item.count" :max=maxIcon  style="position: absolute;right: -4px;top: 6px;" v-if="item.count !== 0"></el-badge>
                </div>
            </div>
            <!--<div class="btns-div" @click="changeType" v-if="menu.length<=3">-->
                <!--<div v-for="item,index in menu" :class="['inline-span',{'check-type':index==0}]">-->
                    <!--<div class="bg" :data-i="index+1" :data-type="item.type?item.type:'1'"></div>-->
                    <!--<el-badge :value="item.count" :max=maxIcon class="item">{{item.name}}</el-badge>-->
                <!--</div>-->
                <!--<span ref="line" class="btn-line"></span>-->
            <!--</div>-->
            <!--<div class="btns-div" @click="changeType" v-if="menu.length>3">-->
                <!--<div class="btns-div-content">-->
                    <!--<div v-for="item,index in menu" :class="['inline-span',{'check-type':index==0}]" v-if="index <= 2">-->
                        <!--<div class="bg" :data-i="index+1" :data-type="item.type?item.type:'1'"></div>-->
                        <!--<el-badge :value="item.count" :max=maxIcon class="item">{{item.name}}</el-badge>-->
                    <!--</div>-->
                <!--</div>-->

                <!--<div class="btns-div-content" style="margin-top: 12px">-->
                    <!--<div v-for="item,index in menu" :class="['inline-span',{'check-type':index==0}]" v-if="index > 2">-->
                        <!--<div class="bg" :data-i="index+1" :data-type="item.type?item.type:'1'"></div>-->
                        <!--<el-badge :value="item.count" :max=maxIcon class="item">{{item.name}}</el-badge>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<span ref="line" class="btn-line"></span>-->
            <!--</div>-->
        </div>
        <ul class="list-content">
            <li v-for="data,index in mapDatas" @click="checkItem(data.id)" :key="data.id" :class="{high:data.checked}">
                <div class="check-trig"></div>
                <p class="field-details_tou">
                    <el-checkbox v-model="data.checked"></el-checkbox>
                    <span class="field-details_ddid">{{data.full_dingdong}}.</span>
                    <span>{{data.dispatch_status_link}}</span>
                </p>
                <p><span class="clock"></span>{{data.forecast_pickup_time}} - 22:00</p>
                <p><span class="send"></span><span class="field-details_send">S.</span>[{{data.pick_name}}] / <span
                        class="mobile">{{data.pick_phone}}</span></p>
                <p><span class="get"></span><span class="field-details_rec">H.</span>[{{data.delivery_name}}] / <span
                        class="mobile">{{data.delivery_phone}}</span></p>
                <p class="address"><span class="local"></span>{{data.delivery_address}}</p>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeName: '',
                searchStr: "",
                wayBillType: null,
                baseMapData: [], // 初始化存储的订单数据
                showOrderList: true,
                maxIcon: 99,
                timer: null,
                menu: [],
                times: null
            };
        },
        props: {
            mapData: {
                type: Object | Array,
                default: null
            },
            value: {
                type: Number,
                default: null
            }
        },
        computed: {
            mapDatas() {
                return this.mapData;
            },
            dataRefreshDialog() {
                return this.$store.state.num;
            }
        },
        watch: {
            searchStr: function (val) {
                clearInterval(this.times);
                this.times = setTimeout(() => {
                    this.handleIconClick();
                },500)
            },
            wayBillType: function(val) {
                this.$emit('input', this.wayBillType);
            },
            value: function(val) {
                this.wayBillType = this.value;

            },
            dataRefreshDialog: function () {
                this.refresh();
            },

            showOrderList: function (newValue) {
                if (newValue) {
                    this.mapData = this.baseMapData;
                } else {
                    this.baseMapData = this.mapDatas; // 先保存
                    let arr = [];
                    this.mapData.forEach(item => {
                        if (item.checked || item.checked === true) {
                            arr.push(item);
                        }
                    });
                    this.mapData = arr;
                }
            }
        },
        created() {
            this.$http.get("express/order/nav").then(res => {
                for (let k in res.data.data) {
                    this.menu.push(res['data']['data'][k]);

                }
                this.wayBillType = this.menu[0].type;
            }).catch(error => {
                if (error.response.data.msg) {
                    this.$message.error(error.response.data.msg);
                } else {
                    this.$message.error('请求错误：' + error.response.status);
                }
            });
        },
        methods: {
            clearInput() {
                this.searchStr = '';
            },
            checkItem(id) {
                this.$emit("checkItem", id, false)
            },
            refresh() {
                this.searchStr = "";
                this.$emit("refresh");
            },
            loading() {
                this.$emit("load");
            },
            handleIconClick() {
                if (this.searchStr.length > 20) {
                    return;
                }
                this.timer = setTimeout(() => {
                    clearTimeout(this.timer);
                    this.loading();
                }, 400);
                this.$http.get("express/order?pageSize=100&dingdong=" + this.searchStr + '&orderDispatchStatus=' + this.wayBillType)
                    .then(res => {
                        clearTimeout(this.timer);
                        this.$emit("cancel");
                        if (!!res.data.data && res.data.data.length > 0) {
                            this.$message.success('数据已更新');
                        } else {
                            this.$message.info('暂无数据');
                        }
                        this.$emit("refresh", res.data.data);
                    })
                    .catch(err => {
                        clearTimeout(this.timer);
                        this.$emit("cancel");
                        this.$message.error("查询出错");
                        console.log(err);
                    });
            },
            changeType(evt) {
                this.wayBillType = +evt.target.dataset['type'];
                let type = +evt.target.dataset['i'];
                this.$refs.line.style.left = (type - 1) * 60 + 'px';
                let ck = document.getElementsByClassName('check-type')[0];
                ck.className = "inline-span";
                evt.target.parentNode.className += " check-type";
                this.refresh();
            }
        }
    };
</script>
<style lang="less">
    .list-box{
        .el-radio__inner{
            display: none !important;
        }
        .el-radio.is-bordered{
            padding:6px 10px 0 0px !important;
            height: 26px  !important;
        }
    }

</style>
<style scoped lang='less'>
    .list-box {
        right: 0;
        .search-div {
            border-bottom: 1px solid #eee;
        }
        .btns-div {
            font-size: 14px;
            color: #303133;
            letter-spacing: 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            /*overflow: hidden;*/
            /*height: 60px;*/
            padding: 14px 0 10px;
            position: relative;
            /*overflow-x: scroll;*/
            background-color: #fff;
            /*.item{*/
            /*width: 60px;*/
            /*}*/
            .btns-div-content {
                display: flex;
                justify-content: space-around;
            }

            .inline-span {
                flex: 1;
                display: flex;
                width: 60px;
                position: relative;
                align-items: center;
                justify-content: center;
                .bg {
                    position: absolute;
                    z-index: 2;
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                }
            }
            .check-type {
                color: #1989FA;
            }

        }

        .list-content {
            li {
                height: auto;
                .address {
                }
                p {
                    color: #000;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    .mobile {
                        color: #676767;
                    }
                    .send, .get, .local, .clock {
                        flex: 0 0 16px;
                        font-size: 12px;
                        color: #FFFFFF;
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        text-align: center;
                        border-radius: 8px;
                        display: block;
                        margin-right: 6px;
                    }
                    .clock, .local {
                        background-color: #9b9b9b;
                        color: #fff;
                    }
                    .clock {
                        background: url(../../../../../assets/img/shijian@2x.png) no-repeat;
                        background-size: contain;
                    }
                    .local {
                        margin-top: 2px;
                        background: url(../../../../../assets/img/dingwei@2x.png) no-repeat;
                        background-size: contain;
                    }
                    .get {
                        background: url(../../../../../assets/img/shoujianren@2x.png) no-repeat;
                        background-size: contain;
                    }
                    .send {
                        background: url(../../../../../assets/img/jijianren@2x.png) no-repeat;
                        background-size: contain;
                    }
                }
                p:last-child {
                    align-items: self-start;
                    height: auto;
                    margin-bottom: 0;
                }
            }
        }
    }

    ::-webkit-scrollbar {
        width: 2px;
    }
</style>

